{extend name="layout" /}
{block name="body"}    
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          
          <form action="{:url('edit')}" method="post" name="edit-form" class="row edit-form">
            <div class="form-group col-md-12">
              <label for="title">角色名称</label>
              <div class="form-controls">
                <input type="text" class="form-control" name="title" id="title" value="{$info.title}" placeholder="请输入角色名称" />
                <small class="form-text text-muted">(20个字符以内!)</small>
              </div>
            </div>
            <div class="form-group col-md-12">
              <label for="remark">备注</label>
              <div class="form-controls">
                <textarea name="remark" class="form-control" rows="3" id="remark">{$info.remark}</textarea>
                <small class="form-text text-muted">(50个字符以内!)</small>
              </div>
            </div>
            <div class="form-group col-md-12">
              <label>状态</label>
              <div class="form-controls clearfix">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="statusOne" name="customRadioInline" class="custom-control-input" value="0" {if $info['status'] == 0}checked{/if}>
                  <label class="custom-control-label" for="statusOne">禁用</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="statusTwo" name="customRadioInline" class="custom-control-input" value="1" {if $info['status'] == 1}checked{/if}>
                  <label class="custom-control-label" for="statusTwo">启用</label>
                </div>
              </div>
            </div>
            <div class="form-group col-md-12">
              <label>配置权限</label>
              <div class="form-controls">
                <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                      <th>
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" class="custom-control-input" id="check-all">
                          <label class="custom-control-label" for="check-all">全选</label>
                        </div>
                      </th>
                    </thead>
                    <tbody>
                      {volist name="rules" id="rule"}
                      <tr>
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" name="rules[]" class="custom-control-input checkbox-parent" id="roleid-{$rule.id}"  dataid="id-{$rule['id']}" value="{$rule.id}"  {if condition="in_array($rule['id'], $info['rules'])"}checked{/if}>
                            <label class="custom-control-label" for="roleid-{$rule.id}">{$rule.title}</label>
                          </div>
                        </td>
                      </tr>
                      {notempty name="rule['_child']"}
                      <?php $parentDataId = 'id-' . $rule['id'];?>
                      {:echo_rule_list($rule['_child'], $parentDataId, $info)}
                      {/notempty}
                      {/volist}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="form-group col-md-12">
              <input type="hidden" name="id" value="{$info.id}" />
              <button type="submit" class="btn btn-primary m-r-5 ajax-post" target-form="edit-form">确 定</button>
              <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
            </div>
          </form>
 
        </div>
      </div>
    </div>
    
  </div>
{/block}
{block name="otherjs"}
{load href="/admin/js/chosen.jquery.min.js"}
<script type="text/javascript">
$(function(){
    // 因为是权限选取，这里采取的父子节点选中和取消的规则如下：
    // 用户选中父节点而不影响子节点，取消父节点时会同时取消所有子节点
    $('input.checkbox-parent').on('change', function(){
        /*
        var dataid = $(this).attr("dataid");
        $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
        */
        if (!$(this).is(':checked')) {
            var dataid = $(this).attr("dataid");
            $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
        }
    });
    // 对于子节点的处理，选中子节点同时需要选中父节点，但取消子节点不影响父节点
    $('input.checkbox-child').on('change', function(){
        var dataid = $(this).attr("dataid");
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        var parent = $('input[dataid=' + dataid + ']');
        if($(this).is(':checked')){
            parent.prop('checked', true);
            //循环到顶级
            while(dataid.lastIndexOf("-") != 2){
                dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                parent = $('input[dataid=' + dataid + ']');
                parent.prop('checked', true);
            }
        }/*else{
            //父级
            if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                parent.prop('checked', false);
                //循环到顶级
                while(dataid.lastIndexOf("-") != 2){
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                        parent.prop('checked', false);
                    }
                }
            }
        }*/
    });
});
</script>
{/block}